<template>
  <div class="clickInfoContainer" v-if="isClickInfoShow" v-drag>
    <div class="clickInfoTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">单点结果展示</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="clickInfoContent">
      <div
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
          margin-bottom: 10px;
        "
      >
        单点结果选择
      </div>
      <div
        class="conditionContent-type"
        style="
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;
        "
      >
        <div style="width: 60px; font-weight: bold">类别</div>
        <div style="display: flex">
          <div
            style="
              width: 120px;
              height: 25px;
              line-height: 25px;
              background-color: #fff;
              
              color: black;
              border-radius: 3px;
              text-align: center;
            "
            id="Tab-Line"
            @click="selectLine"
          >
            管线
          </div>
          <div
            style="
              width: 120px;
              height: 25px;
              margin-left: -3px;
              line-height: 25px;
              background-color: #c4c6c8;
              color: black;
              border-radius: 3px;
              text-align: center;
            "
            id="Tab-Equipment"
            @click="selectEquipment"
          >
            设备设施
          </div>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
          margin-bottom: 10px;
          margin-top: 10px;
        "
      >
        单点结果
      </div>
      <div class="clickContent" v-if="active == 'Line'">
        <div class="content">
          <el-table
            :data="clickQueryLineResult"
            border
            v-loading="loading"
            element-loading-text="加载中"
            @row-click="handleRowClick"
            style="width: 100%"
          >
            <el-table-column
              prop="keywords"
              label="关键字"
              width="220"
            ></el-table-column>

            <el-table-column
              prop="pipe_dia"
              label="口径"
              width="220"
            ></el-table-column>
            <!-- <el-table-column
              prop="pipe_dia"
              label="样式"
              width="180"
            ></el-table-column> -->
            <!-- 如果需要展示更多字段，可以继续添加 el-table-column -->
          </el-table>
        </div>
      </div>
      <div class="clickContent" v-else>
        <div class="content">
          <el-table
            :data="clickQueryPointResult"
            @row-click="handleRowClick"
            border
            v-loading="loading"
            element-loading-text="加载中"
            style="width: 100%"
          >
            <el-table-column
              prop="keywords"
              label="关键字"
              width="150"
            ></el-table-column>

            <el-table-column
              prop="node_prop"
              label="类别"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="diameter"
              label="口径"
              width="150"
            ></el-table-column>
            <!-- 如果需要展示更多字段，可以继续添加 el-table-column -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClickInfoShow",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      loading: true,
      active: "Equipment",
      type: "Line",
    };
  },
  computed: {
    isClickInfoShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    clickQueryLineResult() {
      return this.$store.state.clickQueryDataLine;
    },
    clickQueryPointResult() {
      return this.$store.state.clickQueryDataPoint;
    },
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    changeArea(type) {
      this.active = type;
      this.map.interaction.cancelYjDraw();
      this.areaTableData = [];
      this.keywords = [];
      switch (type) {
        case "all":
          break;
        case "template":
          break;
        default:
          break;
      }
    },
    handleRowClick(row, column, event) {
      let param = {};

      param.rec = Object.entries(row).map(([key, value]) => ({
        fldname: key,
        fldtype: "", // 如果需要其他值，可以在这里修改
        fldval: value,
      }));
      this.$store.commit("setDetailDataPopList", param);

      // 获取当前行的数据
      const rowData = row;
      console.log("当前行的数据:", rowData);
    },
    selectLine() {
      let EquipmentDom = document.querySelector("#Tab-Equipment");
      let lineDom = document.querySelector("#Tab-Line");
      lineDom.classList.remove("inactive-select-class");
      lineDom.classList.add("active-select-class");
      EquipmentDom.classList.remove("active-select-class");
      EquipmentDom.classList.add("inactive-select-class");
      this.active = "Line";
    },
    selectEquipment() {
      let EquipmentDom = document.querySelector("#Tab-Equipment");
      let lineDom = document.querySelector("#Tab-Line");
      EquipmentDom.classList.remove("inactive-select-class");
      EquipmentDom.classList.add("active-select-class");
      lineDom.classList.remove("active-select-class");
      lineDom.classList.add("inactive-select-class");
      this.active = "Equipment";
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
      this.$store.commit('setClickQueryDataLine',[]);
      this.$store.commit('setClickQueryDataPoint',[]);
    },
  },
watch:{
  clickQueryLineResult(){
     setTimeout(() => {this.loading=false;},1000) ;
  },
  clickQueryDataPoint(){
    this.loading=false;
  },
},
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.clickInfoContainer {
  .active-select-class {
    background-color: #c4c6c8 !important;
  }

  .inactive-select-class {
    background-color: #fff !important;
  }
  width: 25vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -19vw;
  height: 46vh;
  z-index: 2;
  .clickInfoTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .clickInfoContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }
      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }
    .clickGroup {
      width: 95%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      button {
        flex: 1;
        border: 1px solid #ebebeb;
        margin: 0.1rem 0.1rem;
        height: 0.8rem;
        border-radius: 4px;
      }
      .active {
        background-color: #5181f9;
        color: #fff;
      }
    }
    .clickContent {
      width: 100%;
      height: 100%;
      .btnGroup {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0.1rem 0;
        button {
          padding: 0 0.5rem;
          /* border: 0; */
          border: 1px solid #ccc;
          background: #007bff;
          color: #fff;
          border-radius: 4px;
          height: 0.8rem;
          margin: 0 0.2rem;
        }
      }
    }
  }
}
</style>
